<html> 
 
<head> 
<title>010 | Toon Shading | J3D</title> 
<!-- Elephant model: http://www.3dmodelfree.com/models//27289-0.htm -->

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>

<script type="text/javascript" src="../build/j3d.js"></script>

<script>
	
	var engine, elephant, sun, ramp1, ramp2, ramp3, post;
	
	function init() {
		if(!checkWebGL()) return;

        J3D.Loader.loadGLSL("../demo/shaders/Toon.glsl", function(s) {
			setup(s);
		});
    }

    function setup(s) {
		engine = new J3D.Engine();
		
		ramp1 = new J3D.Texture("models/textures/toonramp2.png");
		ramp1.wrapMode = gl.CLAMP_TO_EDGE;
		ramp2 = new J3D.Texture("models/textures/toonramp1.png");
		ramp2.wrapMode = gl.CLAMP_TO_EDGE;
		ramp3 = new J3D.Texture("models/textures/toonramp3.png");
		ramp3.wrapMode = gl.CLAMP_TO_EDGE;

		engine.setClearColor( new J3D.Color(0.85, 0.85, 0.85, 1.0) );
		
		sun = new J3D.Transform();
		sun.light = new J3D.Light(J3D.DIRECT);
		sun.light.color = new J3D.Color(1.0); // Toon shader uses only one channel for light calculations: r
//		sun.rotation.x = Math.PI;
        sun.rotation.z = Math.PI;
		
		elephant = new J3D.Transform();
		elephant.rotation = new v3(0, Math.PI, 0);
		
		J3D.Loader.loadJSON("models/elephant.js", function(j) {  elephant.geometry = new J3D.Mesh(j); } );
		
		elephant.renderer = s;
		elephant.renderer.uColorSampler = ramp1;
		
		var camera = new J3D.Transform();
		camera.camera = new J3D.Camera();
		camera.position.z = 12;
		camera.position.y = -1.2;
		engine.camera = camera;
		engine.scene.add(camera, elephant, sun);
		
		post = new J3D.Postprocess(engine);
		post.filter = new J3D.ShaderUtil.parseGLSL(J3D.ShaderSource.Vignette);

		draw();
	}
	
	function draw() {
		if(document.getElementById("ra").checked) elephant.renderer.uColorSampler = ramp1;
		if(document.getElementById("rb").checked) elephant.renderer.uColorSampler = ramp2;
		if(document.getElementById("rc").checked) elephant.renderer.uColorSampler = ramp3;

		elephant.rotation.y -= Math.PI * J3D.Time.deltaTime / 6000;
		post.render();
		requestAnimationFrame(draw);
	}
	
</script>

</head> 

<body onload="init();">
	
	<script>
		setLabels("010. Toon shading");
	</script>
	<div id="details">
		Example of toon shading using color ramps:<br>
		<input type='radio' id="ra" name='ramp' checked> ramp A 
		<input type='radio' id="rb" name='ramp'> ramp B 
		<input type='radio' id="rc" name='ramp' value='c'> ramp C<br>
		Elephant model from <a href="http://www.3dmodelfree.com/models//27289-0.htm">here</a>.
	</div>	

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body> 

</html> 












